<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../../../../login-starter/src/main/resources/static/js/login.js"></script>
</head>
<body>
<div id="app">
    <el-container style="width: 900px; margin: auto">
        <el-header style="background-color: #eee; display: flex ;justify-content:space-between ; align-items: center">
            <h2>xxx 系统</h2>
            <login ref="lg" @logined="onlogin"></login>
            <div v-if="user">
                欢迎{{user.cname}}
                <el-link @click.prevent="showPwdWin">修改密码</el-link>
                <el-link @click.prevent="logout">退出</el-link>
            </div>
            <div v-else>
                <el-link @click.prevent="showLoginWin">登陆</el-link>
                <el-link @click.prevent="showForgetWin">忘记密码</el-link>
            </div>
        </el-header>
        <el-main style="background-color: #ddd;height: 500px">
            <h2>单文件上传</h2>
            <form action="upload" method="post" enctype="multipart/form-data">
                文件:<input type="file" name="file"><br>
                路径:<input type="text" name="webPath" value="img"><br>
                <button>上传</button>
            </form>

            <h2>多文件上传</h2>
            <form action="uploads" method="post" enctype="multipart/form-data">
                文件:<input type="file" name="file"><br>
                文件:<input type="file" name="file"><br>
                文件:<input type="file" name="file" multiple><br>
                路径:<input type="text" name="webPath" value="img"><br>
                <button>上传</button>
            </form>
        </el-main>
    </el-container>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            user: null,
        },
        methods: {
            showLoginWin() {
                this.$refs.lg.openLoginWin();
            },
            onlogin(user) {
                this.user = user;
            },
            logout() {
                this.$refs.lg.logout();
            },
            showPwdWin() {
                this.$refs.lg.openPwdWin();
            },
            showForgetWin() {
                this.$refs.lg.openForgetWin();
            }
        }
    })
</script>
</body>
</html>